<script setup lang="tsx">
import { reactive, onMounted ,ref} from 'vue'
import { HttpCodeEnum } from '@packages/share/enums'
import { getEffectCpeInfoAPI, getimpactAssetsListApi,getEffectDetailsAPI } from '@/api/search/index'
import { assignObject } from '@/utils/object'
import { useTablePage1, type OptionsItem } from '@/hooks/web'
const props = defineProps({
  id: { type: String, required: true }
})
const emit = defineEmits(['detailItem'])
const ruleForm = reactive({})
const { table, page, getRecords } = useTablePage1(getimpactAssetsListApi, ruleForm, props.id)
const baseInfo = reactive({
  product: '',
  cpe: []
})

const ruleTable = reactive({
  columns: [
    { label: 'IP', prop: 'ip' },
    { label: '产品名称', prop: 'product' },
    { label: '产品厂商', prop: 'company' },
    { label: '设备类型', prop: 'device' },
    { label: '产品型号', prop: 'type' },
    { label: '漏洞数', prop: 'number' },
    {
      label: '操作',
      width: 200,
      render: (item:any) => (
        <div>
          <span class="click" onClick={()=>detailsClick(item.row)}>
            详情
          </span>
        </div>
      )
    }
  ]
})
// 详情点击
const detailsClick=(value:any)=>{
  getEffectDetailsAPI(value.id).then((res) => {
    let { code, data } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      emit('detailItem', data)
    }
  })
}
// 查看更多
const checkMore = ref(false)
const CPEfilter=()=>{
  if(!checkMore.value && baseInfo.cpe){return [baseInfo.cpe[0]]}
  else{
    return baseInfo.cpe
  }
}
const getInfo = (id: string) => {
  getEffectCpeInfoAPI(id).then((res) => {
    let { code, data } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      assignObject(baseInfo, data)
    }
  })
}

onMounted(() => {
  getInfo(props.id)
})
</script>
<template>
  <div>
    <div class="title">影响范围</div>
    <div class="item">
      <div class="label">影响厂商/产品：</div>
      <div class="content">{{ baseInfo.product }}</div>
    </div>
    <div class="item">
      <div class="label">CPE：</div>
      <div class="content">
        <ul class="list">
          <li v-for="(item, index) in CPEfilter()" :key="index">{{ item }}</li>
        </ul>
        <jm-button link type="primary" @click="checkMore=true" v-if="baseInfo.cpe?.length>1"> 查看更多({{baseInfo.cpe?.length-1}}) </jm-button>
      </div>
    </div>
  </div>
  <div>
    <div class="title">受影响资产</div>
    <!-- 资产列表 -->
    <jmp-table :data="table.records" :columns="ruleTable.columns" :loading="table.loading" />
    <!-- 分页 -->
    <jmp-pagination
      v-model:page="page.pageNum"
      v-model:limit="page.pageSize"
      v-model:total="page.total"
    />
  </div>
</template>
<style scoped lang="scss">
.title {
  margin-bottom: 1.25rem;
  font-weight: 700;
}
.item {
  padding: 0.625rem 1.25rem;
  display: flex;
  font-size: 0.875rem;
  color: var(--el-text-color-regular);

  .label {
    width: 8.125rem;
    flex-shrink: 0;
  }
  .description {
    height: 2.5rem;
    overflow: hidden;
    &.is-hidden {
      height: auto;
    }
  }
  ul {
    list-style: disc;
    li {
      line-height: 1.5;
    }
  }
}
</style>
